<template>
	<view>
		<tn-toast ref="toast"></tn-toast>
		<!-- 顶部背景 -->
		<view style="z-index: -10;">
			<image src="http://n298651t63.zicp.vip:9001/image/file/20221017/a578b44580e04cf1ad7d27731fc01dbe_new.png"
				style="width: 100%;height: 40vh;"></image>
			<view class="heardImage"></view>
		</view>

		<!-- 展示地区店铺列表 -->
		<view class="centerBox">
			<!-- 搜索和操作区域 -->
			<view class="search-action-area">
				<!-- 搜索框 -->
				<view class="search-box">
					<u-search
						v-model="searchForm.mchName"
						placeholder="请输入门店名称"
						:show-action="true"
						action-text="搜索"
						height="70rpx"
						@search="handleSearch"
						@custom="handleSearch"
					></u-search>
				</view>
				
				<!-- 操作按钮 -->
				<view class="action-buttons">
					<u-button 
						type="primary" 
						@click="addStore" 
						icon="plus" 
						size="small"
						class="action-btn"
					>添加门店</u-button>
					<u-button 
						type="warning" 
						@click="resetList" 
						icon="reload" 
						size="small"
						class="action-btn"
					>重置</u-button>
				</view>
			</view>

			<view class="total-count">共{{ total }}家门店</view>
			
			<view v-for="(item, index) in storeList" :key="index" class="storeBox bg-white radius">
				<view class="store-header">
					<view class="store-info">
						<view class="store-name text-black text-bold text-xl">	{{item.mchName}}</view>
						<view class="store-detail text-gray text-sm">
							<view>所属机构: {{item.deptName}}</view>
							<view>联系人: {{item.director}}</view>
							<view>手机号: {{item.phone}}</view>
							<view>主要地址: {{item.mchAddr}}</view>
							</view>
					</view>
					
					<view class="store-images">
						<image v-for="(image, i) in (item.scrollPicUrls || '').split(',')" 
                               :key="i" 
                               mode="scaleToFill" 
                               :src="image"
                               class="store-image">
                        </image>
                    </view> 
				</view>

			   <!-- 按钮区域 - 调小按钮尺寸 -->
			   <view class="action-box">
				<!-- 第一行按钮 -->
				<view class="btn-row">
					<u-button type="primary" size="small" @click="viewRoom(item)">查看房间</u-button>
					<u-button type="success" size="small" @click="openMaxDoor(item.id)">开大门</u-button>
					<u-button type="warning" size="small" @click="bindGateway(item.id)">绑定网关</u-button>
				</view>
				<!-- 第二行按钮 -->
				<view class="btn-row">
					<u-button type="info" size="small" @click="editStore(item)">编辑</u-button>
					<u-button type="error" size="small" @click="deleteStore(item.id)">删除</u-button>
				</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<u-loadmore :status="loadStatus" />
		</view>
	</view>
</template>

<script>
export default {
	name: 'store',
	data() {
		return {
			searchForm: {
				mchName: ''
			},
			total: 0,
			storeList: [],
			pageNum: 1,
			pageSize: 10,
			loadStatus: 'loadmore'
		}
	},
	init() {
				let app = getApp();
				console.log('验证是否有session')
				app.getUserInfo();
			},
			onShow(){
				this.getStoreList();
			},
			onPageScroll(e) {
			    this.scrollTop = e.scrollTop;
			},
			onReachBottom() {
			    this.loadStatus = 'loading';
			    // 获取数据
				this.getStoreList()
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.pageNum = 1
				this.$refs.uWaterfall.clear();
				// 获取数据
				this.getList();
				// 关闭刷新
				uni.stopPullDownRefresh();
			},
	methods: {
		// 搜索方法
		handleSearch() {
			this.pageNum = 1
			this.getSearchStoreList()
		},

		// 添加门店
		addStore() {
			uni.navigateTo({
				url: '/pages/store/edit/index?type=add'
			})
		},
		getSearchStoreList(){
			const params = {
				mchName: this.searchForm.mchName,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}
      //发送POST请求根据搜索条件获取门店列表_功能未成功实现
      uni.$u.http.post('/system/merchant/list', params)
        .then(res => {
          if(res.code === 0) {
            this.storeList = res.rows || []
          }
        })
        .catch(err => {
          uni.showToast({
            title: '获取门店列表失败',
            icon: 'none'
          })
        })
		},
		// 添加查看房间方法
		viewRoom(item) {
			uni.setStorageSync('mchId', item.id)
			uni.setStorageSync('mchName', item.mchName)
			uni.navigateTo({
				url: `/pages/room/index?mchId=${item.id}`
			})
		},

		// 重置列表
		resetList() {
			this.searchForm.mchName = ''
			this.pageNum = 1
			this.getStoreList()
		},

		// 编辑门店
		editStore(item) {
			uni.setStorageSync('storeInfo', item)
			uni.navigateTo({
				url: '/pages/store/edit/index?type=edit'
			})
		},

		// 删除门店
		deleteStore(id) {
			uni.showModal({
				title: '提示',
				content: '确定要删除该门店吗？',
				success: (res) => {
					if (res.confirm) {
						// 发送请求调用删除API删除门店_未测试
						uni.$u.http.delete(`/system/merchant/mchs/${id}`).then(() => {
							uni.$u.toast('删除成功')
							this.getStoreList()
						})
					}
				}
			})
		},
		openGate(id) {
					uni.showLoading({
						title: '开大门中，请稍后'
				
					});
				
					let param = {
						"mchid": id,
					}
				    // 发送POST请求开大门_未测试
					uni.$u.http.post('/system/merchant/openGate', param).then(res => {
						console.log('response:', res);
						uni.showToast({
							icon: 'none',
							title: res.resultMsg
						})
					});
				},
		// 绑定网关
		bindGateway(item) {
			uni.showModal({
			title: '绑定网关',
			content: '确定要为该门店绑定网关吗？',
			success: (res) => {
				if (res.confirm) {
				uni.showLoading({
					title: '绑定中'
				});
				
				// 这里替换为实际的绑定网关API
				uni.$u.http.post('/rest/device/a/bindGateway', {
					"mchid": item.id
				}).then(res => {
					uni.showToast({
					title: '绑定成功',
					icon: 'success'
					});
				}).catch(err => {
					uni.showToast({
					title: '绑定失败，请重试',
					icon: 'none'
					});
				}).finally(() => {
					uni.hideLoading();
				});
				}
			}
			});
		},
		// 获取门店列表
		getStoreList() {
			const params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				//storeName: this.searchForm.storeName
			}
			//发送请求获取门店列表_已完成
			uni.$u.http.post('/system/merchant/mchs', params).then(res => {
				if (this.pageNum === 1) {
					this.storeList = res.data.list
				} else {
					this.storeList = [...this.storeList, ...res.data.list]
				}
				
				this.total = res.data.total
				
				if (this.storeList.length >= res.data.total) {
					this.loadStatus = 'nomore'
				} else {
					this.loadStatus = 'loadmore'
				}
			}).catch(err => {
				uni.$u.toast('获取门店列表失败')
				this.loadStatus = 'loadmore'
			})
		},

		// 保留原有其他方法...
	}
}
</script>

<style scoped lang="scss">

.heardImage {
	background: #4E9B52;
	width: 100%;
	height: 40vh;
	position: fixed;
	top: 0px;
}


.btnSearch {
	height: 50rpx;
	width: 160rpx;
	border-radius: 40rpx;
	color: #4E9B52;
	font-weight: 500;
	font-size: 28rpx;
	text-align: center;
	line-height: 50rpx;
	border: 0px !important;
}

.centerBox {
	position: fixed;
	top: 12vh;
	width: 100%;
	padding: 20rpx;
	height: 85vh;
	overflow: auto;
}

.storeBox {
	margin: 20rpx 0;
	padding: 24rpx;
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.boxImage {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 20rpx;
	margin-top: 20rpx;
}

.editBtn {
	margin-right: 20rpx;
	color: white;
	background-color: orange;
	width: 180rpx;
	height: 60rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 12rpx
}
.operation {
  display: flex;
  align-items: center;
}

.operation .margin-right-sm {
  margin-right: 10rpx;
}

.operation .margin-left-sm {
  margin-left: 10rpx;
}

/* 新增样式 */
.search-box {
  margin-bottom: 20rpx;
  
  :deep(.u-search) {
    background-color: #f5f5f5;
    border-radius: 8rpx;
  }
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  
  .action-btn {
    flex: 1;
    max-width: 200rpx;
    
    &.u-button {
      font-size: 26rpx;
    }
  }
}

.action-box {
  .btn-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;
    
    .u-button {
      flex: 1;
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.total-count {
  color: #e2e2e2;
  margin: 20rpx 0;
  font-size: 28rpx;
  font-weight: bold;
}

.store-container {
  background: #fff;
  margin: 20rpx;
  padding: 24rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.store-info {
  margin-bottom: 20rpx;
}


.store-detail {
  margin-top: 10rpx;
}
.store-images {
  margin: 20rpx 0;
  
  .store-image {
    width: 200rpx;
    height: 200rpx;
    margin-right: 10rpx;
    border-radius: 8rpx;
  }
}
.store-image {
  height: 50rpx;
  width: 50rpx;
  border-radius: 10rpx;
}

.store-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.store-name {
  font-size: 32rpx;
  font-weight: bold;
}

/* 让按钮更美观 */
.u-button {
  min-width: 160rpx !important;
}

.u-button--mini {
  padding: 0 24rpx !important;
}

.search-action-area {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.store-container {
  padding: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
}

.store-info {
  .store-name {
    font-size: 32rpx;
    margin-bottom: 16rpx;
  }
  
  .store-detail {
    font-size: 26rpx;
    color: #666;
    line-height: 1.8;
  }
}

.store-images {
  margin: 20rpx 0;
  
  .swiper {
    height: 300rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }
  
  .swiper-image {
    width: 100%;
    height: 100%;
  }
}

.action-box {
  .btn-row {
    display: flex;
    gap: 16rpx;
    margin-bottom: 16rpx;
    
    .u-button {
      flex: 1;
      
      /* 调整按钮样式 */
      &.u-button--mini {
        padding: 0 20rpx;
        font-size: 24rpx;
        height: 56rpx;
        line-height: 56rpx;
      }
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
